<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('项目管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="project-form">
                <div class="col-sm-12">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>项目名称：</p>
                                <input type="text" name="proName" class="form-control">
                            </li>
                            <li>
                                <p>项目地址：</p>
                                <input type="text" name="proPosition" class="form-control">
                            </li>
                            <li>
                                <p>项目类型：</p>
                                <select name="proType" class="form-control">
                                    <option value="">请选择</option>
                                    <option th:each="proType : ${proType}" th:text="${proType.paramValue}"
                                            th:value="${proType.id}"></option>
                                </select>
                            </li>
                            <li>
                                <p>项目情况：</p>
                                <select name="proStatus" class="form-control">
                                    <option value="">请选择</option>
                                    <option th:each="proStatus : ${proStatus}" th:text="${proStatus.paramValue}"
                                            th:value="${proStatus.id}"></option>
                                </select>
                            </li>
                            <li>
                                <p>开工时间：</p>
                                <input type="text" id="startTime" name="startTime" class="form-control">
                            </li>
                            <li>
                                <p>竣工时间：</p>
                                <input type="text" id="endTime" name="endTime" class="form-control">
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addTab()">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.editTab()">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportData('项目信息')">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
    var prefix = ctx + "projectManage";

    $(function () {
        formatDate();
        queryData();
    });

    function queryData() {
        var colnums = [];
        var checkbox = {checkbox: true};
        var pro_name = {field: 'proName', title: '项目名称', sortable: true};
        var pro_type = {field: 'proType', title: '项目类型'};
        var pro_status = {field: 'proStatus', title: '项目状态'};
        var start_time = {field: 'startTime', title: '开工时间', sortable: true};
        var end_time = {field: 'endTime', title: '竣工时间', sortable: true};
        var contract_cost = {field: 'contractCost', title: '合同造价(万元)', sortable: true};
        var pro_position = {field: 'proPosition', title: '项目地址', sortable: true};
        var belong_comp = {field: 'belongComp', title: '工程公司', sortable: true};
        var pro_manager_person = {field: 'proManagerPerson', title: '项目经理'};
        var business_director = {field: 'businessDirector', title: '商务负责人'};
        var technical_director = {field: 'technicalDirector', title: '技术负责人'};
        var network = {
            field: 'network', title: '网络', align: 'center',
            formatter: function (value, row, index) {
                if (row.network == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var erp = {
            field: 'erp', title: 'ERP', align: 'center',
            formatter: function (value, row, index) {
                if (row.erp == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var attendance = {
            field: 'attendance', title: '劳务考勤', align: 'center',
            formatter: function (value, row, index) {
                if (row.attendance == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var monitor = {
            field: 'monitor', title: '监控', align: 'center',
            formatter: function (value, row, index) {
                if (row.monitor == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };
        var devops = {
            field: 'devops', title: '运维', align: 'center',
            formatter: function (value, row, index) {
                if (row.devops == 1) {
                    return "<div style='color: green;'>√</div>";
                } else {
                    return "<div style='color: red;'>×</div>";
                }
            }
        };

        colnums.push(checkbox, pro_name, pro_type, pro_status, start_time, end_time, contract_cost, pro_position, belong_comp,
            pro_manager_person, business_director, technical_director, network, erp, attendance, monitor, devops);

        var options = {
            uniqueId: "id",
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "项目",
            columns: colnums
        };
        $.table.init(options);
    }

    function formatDate() {
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#startTime'
            });

            laydate.render({
                elem: '#endTime'
            });
        });
    }
</script>
</body>
</html>